<template>
  <el-card shadow="hover" class="comments-container">
    <h3 class="section-header">评论</h3>
    <el-divider></el-divider>
    <div class="comment-list">
      <CommentItem
          v-for="comment in comments"
          :key="comment.commentId"
          :comment="comment"
          @likeComment="$emit('likeComment', comment)"
          @replyToComment="$emit('replyToComment', comment)"
      />
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import CommentItem from '@/views/course/components/CommentItem.vue';
import { getComments } from "@/apis/comment.js";

const props = defineProps({
  courseId: {
    type: Number,
    required: true,
  }
});

const comments = ref([]);

const getComment = async () => {
  const res = await getComments(props.courseId);
  comments.value = res.data;
};

onMounted(() => {
  getComment();
});
</script>

<style scoped>
.comments-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.comment-list {
  margin-bottom: 20px;
}
</style>
